<template>
    <div class="welcome">
        欢迎你,<span class="adminname">{{adminname}}</span>
        <a-button shape="circle" size="small" @click="toset">
            <template #icon>
                <setting-outlined />
            </template>
        </a-button>
        <a-button shape="circle" class="logout" @click="logout" size="small">
            <template #icon>
                <logout-outlined />
            </template>
        </a-button>
    </div>
</template>
<style lang="less" scoped>
.welcome{
    text-align: right;

    .adminname{
        margin-right: 18px;
    }

    .logout{
        margin-left: 15px;
    }
}

</style>
<script>
import { defineComponent } from 'vue';
import {SettingOutlined,LogoutOutlined} from '@ant-design/icons-vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';

export default defineComponent({
    components:{SettingOutlined,LogoutOutlined},
    setup() {
        let adminname=localStorage.getItem('adminname') || sessionStorage.getItem('adminname');
        const store = useStore();
        const router=useRouter();

        const logout= () => {
           store.commit('auth/clearToken');
           router.push({name:'Login'});
        };

        const toset= () =>{
            router.push({name:'SettingIndex'});
        };

        return{
            adminname,logout,toset
        };
    },
})
</script>
